<template>

    <el-form :model="queryWhere" label-width="180px" :inline="true">
      <el-form-item label="收藏ID:" prop="collectId">
        <el-input v-model="queryWhere.collectId" style="width: 240px;" placeholder="请输入收藏ID"></el-input>
      </el-form-item>

      <el-form-item label="歌曲编号:" prop="songId">
        <el-input v-model="queryWhere.songId" style="width: 240px;" placeholder="请输入歌曲编号"></el-input>
      </el-form-item>

      <el-form-item label="歌单编号:" prop="songListId">
        <el-input v-model="queryWhere.songListId" style="width: 240px;" placeholder="请输入歌单编号"></el-input>
      </el-form-item>

      <!-- <el-form-item label="收藏类型" prop="collectType">
        <el-select v-model="queryWhere.collectType"  style="width: 240px;" placeholder="请选择" clearable >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item label="收藏类型:">
          <el-select v-model="collects.collectType" placeholder="请选择收藏类型">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="开始时间"  prop="createTime">
          <el-date-picker clearable
              v-model="queryWhere.createTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择开始时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" prop="updateTime">
          <el-date-picker clearable
                          v-model="queryWhere.updateTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item> -->

          <el-button type="primary" icon="el-icon-search" style="margin-left: 129px;" :loading="false" @click="initTableData">搜索</el-button>
          <el-button type="success" icon="el-icon-star-off" @click="addCollect">添加</el-button>
          <el-button @click="deleteAll">删除</el-button>

          <el-table :data="collectList" border style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column  type="selection"  width="55">
                </el-table-column>
              <el-table-column  prop="collectId"  label="收藏编号"  width="150">  </el-table-column>
              <el-table-column  prop="memberId"  label="用户名"  width="120">  </el-table-column>
              <el-table-column  prop="songListId"  label="歌单编号"  width="120"></el-table-column>
              <el-table-column  prop="songId"  label="歌曲编号"  width="120"></el-table-column>
              <el-table-column  prop="collectType"  label="收藏类型"  width="120">
                <template slot-scope="scope">
                  <el-tag type="success" v-if="scope.row.collectType == 0">歌单类型</el-tag>
                  <el-tag type="success" v-else-if="scope.row.collectType ==1">歌曲类型</el-tag>
                </template>
              </el-table-column>
              <el-table-column  prop="isDeleted"  label="是否删除"  width="120">
                <template slot-scope="scope">
                  <el-tag type="success" v-if="scope.row.isDeleted == 0">用户未删除</el-tag>
                  <el-tag type="success" v-else-if="scope.row.isDeleted == 1">管理员删除</el-tag>
                  <el-tag type="info" v-else-if="scope.row.isDeleted == 2">用户已删除</el-tag>
                </template>
              </el-table-column>
              <el-table-column

                label="收藏时间"
                width="120">
                <template slot-scope="scope">
                 {{getFormatTime(scope.row)}}
                 </template>

              </el-table-column>
            <el-table-column

              label="操作"
            >
              <template slot-scope="scope">
                <el-button @click="handleEdit(scope)" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" @click="handDelete(scope.$index,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryWhere.currentPage" :page-sizes="[2,10, 20, 30, 40]"
                     :page-size="pageInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
                  </el-pagination>
                  <!-- 增加收藏表单 -->
                  <el-dialog title="添加收藏" :visible.sync="dialogFormVisible">
                    <el-form :model="collects">
                      <el-form-item label="收藏编号" >
                        <el-input v-model="collects.collectId" auto-complete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="用户编号">
                        <el-input v-model="collects.memberId" auto-complete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="歌单编号" >
                        <el-input v-model="collects.songListId" auto-complete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="歌曲编号" >
                        <el-input v-model="collects.songId" auto-complete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="收藏类型">
                        <el-select v-model="collects.collectType" placeholder="请选择收藏类型">
                          <el-option label="歌单类型" value="0"></el-option>
                          <el-option label="歌曲类型" value="1"></el-option>
                        </el-select>
                      </el-form-item>
                      <!-- <el-form-item label="是否删除" >
                        <el-input v-model="collects.isDeleted" auto-complete="off"></el-input>
                      </el-form-item> -->
                      <!-- <el-form-item label="收藏时间" >
                        <el-input v-model="collects.createTime" auto-complete="off"></el-input>
                      </el-form-item> -->
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    	<el-button @click="dialogFormVisible = false">取 消</el-button>
                    	<el-button type="primary" v-show="!isShow" @click="updateSinger">确定修改</el-button>
                    	<el-button type="primary" v-show="isShow" @click="addSure">确定增加</el-button>
                    </div>
                  </el-dialog>
    </el-form>
  </div>

</template>

<script>
  import {formatDate,format} from '../../api/index.js'
  export default {
    name:"Collect",
    data() {
      return {
          collectList: [],//收藏表格数据
          editCollects:{},//点击编辑时储存的收藏信息
          selectValue:[],//多选框中储存的信息
          dialogFormVisible: false, //用于控制弹出框是显示还是隐藏。
          isShow:false,//根据选择展示添加或修改
          collects:{
            collectId:'',
            memberId:'',
            songListId:'',
            songId:'',
            collectType:'',
            isDeleted:'',
            createTime:'',
            updatetime:''
          },
          queryWhere: {
            currentPage: 1,
            collectId:'',
            songListId:'',
            songId:'',
            collectType:'',
            createTime:'',
             updatetime:''
          	// collectId: 33,

          },
          pageInfo: {
          	pageSize: 2,
          	totalPage: 1,
          	totalRecord: 0,
          },
          options: [{
            value: '0',
            label: '歌单类型'
          },
            {
              value: '1',
              label: '歌曲类型'
            }],
      }
    },
    mounted() {
    	this.initTableData()
    },
    methods:{
      // 格式化日期
      getFormatTime(row) {
        return format(row.createTime)
      },

            handleEdit(scope) {
              this.collects = {};
              let a = {
              	...scope.row
              }
              this.collects = a;
              console.log(scope.row);
              this.isShow = false;

              for (let attr in scope.row) {
              	this.collects[attr] = scope.row[attr]
              }
              console.log("dsa1sd", this.collects);
              this.dialogFormVisible = true; //显示弹出框
            },
            handDelete(index,row){//点击操作表格中的删除按钮
              console.log(index, row);
              console.log("www" + row.collectId)
              let _this = this;
              this.$confirm('此操作将永久删除该歌手信息, 您确认是否要继续?', '提示', {
              	confirmButtonText: '确定',
              	cancelButtonText: '取消',
              	type: 'warning'
              }).then(() => {


              	_this.$axios.get("/CollectServlet1?method=delete&collectId=" + row.collectId).then(
              		response => {
              			_this.initTableData()

              		},
              		error => {
              			console.log('请求失败了', error.message)
              		}
              	)

              	this.$message({
              		type: 'success',
              		message: '删除成功!',
              	});


              }).catch(() => {
              	this.$message({
              		type: 'info',
              		message: '已取消删除'
              	});
              });
            },
            //查询收藏
      initTableData() {
      	let _this = this;
      	_this.$axios.get("/CollectServlet1?method=query", {
      		params: this.queryWhere
      	}).then(
      		response => {
      			 this.loading = true;
      			// response.data.data.data.forEach(data => {

      			// 	// data.createTime =  formatDate(data.createTime)
      			// 	// data.updateTime =  formatDate(data.updateTime)
      			// })


      			console.log("请求成功了", response.data)

      			console.log(response.data.data.currentPage)
      			_this.queryWhere.currentPage = response.data.data.currentPage;
      			_this.pageInfo.totalPage = response.data.data.totalPage;
      			_this.pageInfo.totalRecord = response.data.data.totalRecord;
      			_this.pageInfo.pageSize = response.data.data.pageSize;

      			console.log("asd1" , response.data.data.data[0])
      			_this.collectList = response.data.data.data;

      			if(this.collects.length == 0 && this.queryWhere.currentPage !== 1){
      				this.queryWhere.currentPage--
      				this.initTableData()
      			}
                          // this.loading=false

      		},
      		error => {
      			console.log('请求失败了', error.message)
      		}
      	)
      },
      addCollect:function(){//添加收藏
        this.collects={};
        this.isShow=true;
        this.dialogFormVisible=true;
      },
      addSure:function(){//确认添加
        let _this=this;
        console.log("zzz",this.collects);
        _this.$axios.get("/CollectServlet1?method=add",{
          params:this.collects
        }).then(function(response){
          _this.initTableData();
           _this.dialogFormVisible=false;
           _this.$notify({
            message:'添加成功',
            type:'success'
          })
        }).catch(function(error){
          console.log("请求失败",error.message)
        })
        },

        updateSinger:function(){//修改收藏

            let _this=this;
            console.log(this.collects)
            this.collects.updateTime = '2020-01-01'
            this.collects.createTime =  format(this.collects.createTime)
            this.collects.updateTime =  format(this.collects.updateTime)

              console.log('xxx',this.collects)
            // this.collects.createTime =  null
            // this.collects.updateTime =  null

            _this.$axios.get("/CollectServlet1?method=update",{
              params:this.collects
            }).then(function(response){
              _this.initTableData();
              _this.dialogFormVisible=false;

              for(let attr in this.collects){
                _this.editCollects[attr]=_this.collects[attr]
              }

              _this.$notify({
                message:'添加成功',
                type:'success'
              });
              _this.initTableData()
            }).catch(function(error){
              console.log("请求失败",error.message)
            })
        },

        //多选框
        toggleSelection(rows) {
        	if (rows) {
        		rows.forEach(row => {
        			this.$refs.multipleTable.toggleRowSelection(row);
        		});
        	} else {
        		this.$refs.multipleTable.clearSelection();
        	}
        },
        handleSelectionChange(val) {
        	this.multipleSelection = val;
        	this.selectValue = val;
        },
        deleteAll:function(){//批量删除
          this.$confirm('此操作将永久删除该收藏，您确认是否要继续', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

            if (this.multipleSelection.length === 0) return this.$message('请选择需要删除的行')
            let id = []
            this.multipleSelection.forEach(data => {
              id.push(
                data.collectId
              )
            })
            id = JSON.stringify(id)
            this.$axios.get("/CollectServlet1?method=deleteByIdS&id=" + id).then(
              response => {
                this.initTableData()()
              },
              error => {}
            )

            this.$message({
            	type: 'success',
            	message: '删除成功!',
            });

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
          },
          handleSizeChange(val) {
            this.pageInfo.pageSize = val;
            this.initTableData();
          },
          handleCurrentChange(curpage) {
          	this.queryWhere.currentPage = curpage;
          	this.initTableData()

          },
    },
  }
</script>

<style>
</style>
